<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加图鉴</title>
</head>

<body>

    <script type="text/html" id="form">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <blockquote class="layui-elem-quote">基础信息</blockquote>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <text title="必填项" style="color:red;">*</text>
                        图鉴名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" autocomplete="off"
                               placeholder="请输入图鉴名称"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <text style="color:red;">支持jpg、png，大小不超过5M，主图鉴尺寸建议 8:10比例，辅图鉴尺寸建议 7:10比例</text>
                    <label class="layui-form-label">
                        <text title="必填项" style="color:red;">*</text>
                        图鉴图标</label>
                    <div class="layui-input-block">
                        <div class="laytpUpload"
                             data-name="icon"
                             data-dir="xm_game/basic/guide/icon"
                             data-accept="image"
                             data-layVerify="required"
                             data-type="ali-oss"
                             data-showChoiceBtn="false"
                        ></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        关联分类</label>
                    <div class="layui-input-block">
                        <div class="xmSelect"
                             data-name="xmssss"
                             data-sourceType="route"
                             data-source="/admin.basic.category/index"
                             data-params='{"search_param":{"basic_game_id":{"value":"{{facade.getUrlParam("game_id")}}","condition":"="},"use_type":{"value":"2,3","condition":"IN"},"status":{"value":"1","condition":"="}}}'
                             data-textField="name"
                             data-valueField="id"
                             data-radio="true"
                             data-paging="true"
                             data-direction="down"
                             data-onchange="relation"
                        ></div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        关联标签</label>
                    <div class="layui-input-block">
                        <div id="source" ></div>
                    </div>
                </div>

                <div id="selectedAdd" class="addSelectBtn">添加 </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <text title="必填项" style="color:red;">*</text>
                        已添加标签</label>

                   <div class="layui-input-block">
                   <div id="selectedLabel"> </div>

                   </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="laytp-btn laytp-btn-primary laytp-btn-sm" lay-submit="" lay-filter="laytp-form">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="laytp-btn laytp-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</script>
    <form class="layui-form" lay-filter="layui-form"></form>
    <script>
        if (localStorage.getItem("staticDomain")) {
            document.write("<link rel='stylesheet' href='" + localStorage.getItem("staticDomain") + "/component/layui/css/layui.css?v=" + localStorage.getItem("version") + "'>")
            document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/layui/layui.js?v=" + localStorage.getItem("version") + "'><\/script>")
            document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/laytp/layuiConfig.js?v=" + localStorage.getItem("version") + "'><\/script>")
            document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/jquery_3.3.1.js?v=" + localStorage.getItem("version") + "'><\/script>")
            document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/jquery.tablednd.js?v=" + localStorage.getItem("version") + "'><\/script>")
        } else {
            document.write("<link rel='stylesheet' href='/static/component/layui/css/layui.css?v=" + localStorage.getItem("version") + "'>")
            document.write("<script src='/static/component/layui/layui.js?v=" + localStorage.getItem("version") + "'><\/script>")
            document.write("<script src='/static/component/laytp/layuiConfig.js?v=" + localStorage.getItem("version") + "'><\/script>")
            document.write("<script src='/static/component/jquery_3.3.1.js?v=" + localStorage.getItem("version") + "'><\/script>")
            document.write("<script src='/static/component/jquery.tablednd.js?v=" + localStorage.getItem("version") + "'><\/script>")
        }
    </script>
    <script>
        layui.use(['jquery', 'laytp'], function () {
            var $ = layui.$

            var selectedValue
            var obj = {}

            let form = layui.form
            let game_id = facade.getUrlParam("game_id")
            layui.laytpl($("#form").html()).render([], function (string) {
                $("form").html(string)
                layui.laytpForm.render()
                form.render()

            })

            window.relation = function (params) {
                const curId = params.change[0].id
                getLabel(curId)
            }

            function initTextArea() {
                $('#selectedLabel').html('')

                $.each(obj, function (key, value) {
                    $('#selectedLabel').append(`
                    <div class="addDom" data-id="${key}">
                        <span>${value}</span>
                        <i class="xm-iconfont xm-icon-close closeAddValue"  data-id="${key}" style="font-size: 12px"></i>
                    </div>
                    `)
                })
            }

            function getLabel(id) {
                var sourceSys = []//定义一个数组，用于接收需要在下拉框显示的可选项
                var selectedDatas = ""//用于存储被选择的数据
                $.ajax({
                    url: "/admin.basic.label/index",//通过这个url从后台查询出你要显示在下拉框的数据，返回List<BO>类型的数据
                    data: { "all_data": 1, "search_param": { "basic_game_id": { "value": game_id, "condition": "=" }, "pid": { "value": id, "condition": "=" } } },
                    type: "post",
                    success: function (obj) {
                        $.each(obj.data, function (index, item) {
                            sourceSys[index] = new Object()
                            sourceSys[index].name = item.name//后端返回的数据中aaa字段赋值给name属性
                            sourceSys[index].value = item.id
                        })
                        console.log(sourceSys)
                        selectedValue = xmSelect.render({
                            el: '#source',//html页面div的id
                            language: 'zn',//中文
                            tips: '请选择标签',//默认显示这句话在下拉框中
                            size: 'large',
                            theme: { color: '#36B368' },
                            radio: false,
                            direction: 'down',
                            toolbar: { show: true },
                            filterable: true,
                            paging: true,//下拉框是否支持分页
                            pageSize: 10,//每页最多显示10条数据
                            height: '400px',
                            data: sourceSys,//sourceSys上面定义的，是一个数组，并且数组中每条数据都是name=xxx,value=xxx的格式
                        })
                    }
                })
            }

            // 点击 添加
            $("#selectedAdd").click(function () {
                const curSelectData = selectedValue.getValue()

                curSelectData.forEach(el => {
                    obj[el.value] = el.name
                })

                initTextArea() // 重新赋值obj
            })

            // 删除事件
            $(document).on("click", ".closeAddValue", function () {
                const id = $(this).attr('data-id')
                Object.keys(obj).forEach(item => {
                    if (id == item) {
                        delete obj[id]
                    }
                })
                console.log(obj)
                initTextArea() // 重新赋值obj
            })

            form.on('submit(laytp-form)', function (data) {

                if (Object.keys(obj).length == 0) {
                    layer.msg("请选择关联标签", { icon: 5, shift: 6 })
                    return false
                }
                delete data.field.select
                delete data.field.xmssss
                data.field.label_ids = Object.keys(obj).join(',')

                var btnAnim = layui.button.load({ elem: $(this) })
                facade.ajax({
                    route: '/admin.basic.guide/add?game_id=' + game_id,
                    data: data.field

                }).done(function (res) {
                    if (res.code === 0) {
                        parent.layui.layer.close(parent.layui.layer.getFrameIndex(window.name))//关闭当前页
                        parent.layui.table.reload("laytp-table")
                    }
                    btnAnim.stop()
                }).fail(function () {
                    btnAnim.stop()
                })
                return false
            })

        })
    </script>
</body>

</html>


<style>
    #selectedLabel {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        min-height: 200px;
        border: 1px solid #b1aeae;
        /* margin-left: 100px; */
        flex-shrink: 0;
        border-radius: 2px;
        box-sizing: border-box;
        padding: 10px;
    }

    .addDom {
        padding: 5px 10px;
        background-color: #36B368;
        color: #fff;
        border-radius: 3px;
        cursor: pointer;
        font-size: 12px;
        margin-right: 10px;
    }

    .addDom span {
        font-size: 11px;
        margin-left: 5px;
    }


    .addSelectBtn {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        width: 31px;
        height: 7px;
        background-color: #36B368;
        color: #fff;
        border-radius: 3px;
        cursor: pointer;
        font-size: 12px;
        padding: 10px;
        margin-top: 10px;
        margin-left: 171px;
    }

    .addSelectBtn:active {
        opacity: 0.7;
    }
</style>